State পরিবর্তন এবং Components এর মধ্যে ডেটা শেয়ারিং

Riot.js-এ State পরিবর্তন এবং Components এর মধ্যে ডেটা শেয়ারিং দুটি অত্যন্ত গুরুত্বপূর্ণ ধারণা, যা আপনাকে অ্যাপ্লিকেশনে ডেটা পরিচালনা এবং একাধিক কম্পোনেন্টের মধ্যে ডেটা আদান-প্রদান করতে সহায়তা করে। Riot.js একটি reliable, reactive data model প্রদান করে, যার মাধ্যমে আপনি সহজে স্টেট পরিবর্তন করতে পারেন এবং কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করতে পারেন।

১. State পরিবর্তন (State Changes)

Riot.js-এ State একটি কম্পোনেন্টের ভিতরের ডেটা। এই ডেটা পরিবর্তন হলে UI তে স্বয়ংক্রিয়ভাবে পরিবর্তন ঘটে, কারণ Riot.js reactive data binding ব্যবহার করে।

State পরিবর্তনের উদাহরণ:

<!-- StateChangeExample.riot -->
<state-change-example>
  <h1>Counter: {count}</h1>
  <button onclick={increment}>Increment</button>

  <script>
    export default {
      onMounted() {
        this.count = 0; // Initial state value
      },

      increment() {
        this.count++; // Increment the state value
      }
    }
  </script>
</state-change-example>

ব্যাখ্যা:

• এখানে count নামক একটি স্টেট ব্যবহার করা হচ্ছে, যা কম্পোনেন্টের ভিতরে ডেটার জন্য ব্যবহৃত হয়।
• increment() ফাংশনটি count এর মান বাড়িয়ে UI আপডেট করবে।
• Reactive ডাটা বাইন্ডিং-এর মাধ্যমে, যখন count পরিবর্তিত হবে, তখন UI তে তাত্ক্ষণিকভাবে পরিবর্তন দেখাবে।

২. Components এর মধ্যে ডেটা শেয়ারিং (Data Sharing Between Components)

Riot.js-এ কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা সহজ। আপনি props এর মাধ্যমে এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা পাস করতে পারেন। এছাড়া custom events ব্যবহার করে কম্পোনেন্টগুলির মধ্যে যোগাযোগ করা যায়।

২.১. Props এর মাধ্যমে ডেটা শেয়ারিং:

একটি কম্পোনেন্টের ডেটা (স্টেট) অন্য কম্পোনেন্টে props হিসেবে পাস করা হয়। Props হল ইনপুট ডেটা যা একটি কম্পোনেন্টকে বাইরে থেকে প্রদান করা হয়।

<!-- Parent.riot -->
<parent>
  <child title={title}></child>

  <script>
    export default {
      onMounted() {
        this.title = "Hello from Parent!"; // State in Parent component
      }
    }
  </script>
</parent>

<!-- Child.riot -->
<child>
  <h2>{opts.title}</h2>

  <script>
    export default {
      // The title prop is received from the parent component
    }
  </script>
</child>

ব্যাখ্যা:

• Parent কম্পোনেন্টে একটি title স্টেট আছে এবং এটি Child কম্পোনেন্টে props হিসেবে পাস করা হয়েছে।
• Child কম্পোনেন্টে opts.title ব্যবহার করে প্রেরিত title ভ্যালু দেখানো হচ্ছে।

২.২. Custom Events এর মাধ্যমে ডেটা শেয়ারিং:

রায়ট.js-এ আপনি custom events ব্যবহার করে কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করতে পারেন। এই ইভেন্টগুলির মাধ্যমে এক কম্পোনেন্ট অন্য কম্পোনেন্টকে কিছু তথ্য পাঠাতে পারে।

<!-- Parent.riot -->
<parent>
  <child onclick={handleChildClick}></child>

  <script>
    export default {
      handleChildClick(event) {
        alert("Child clicked! Data from child: " + event.data);
      }
    }
  </script>
</parent>

<!-- Child.riot -->
<child>
  <button onclick={notifyParent}>Click Me</button>

  <script>
    export default {
      notifyParent() {
        this.emit('click', { data: 'Hello from child!' }); // Emit custom event to Parent
      }
    }
  </script>
</child>

ব্যাখ্যা:

• Parent কম্পোনেন্টে handleChildClick নামক একটি ফাংশন রয়েছে যা Child কম্পোনেন্টের click ইভেন্ট হ্যান্ডল করবে।
• Child কম্পোনেন্টে this.emit('click', {...}) ব্যবহার করে একটি কাস্টম ইভেন্ট পাস করা হচ্ছে, যাতে প্যারেন্ট কম্পোনেন্টে ডেটা প্রেরণ করা যায়।

৩. Global State Management (গ্লোবাল স্টেট ব্যবস্থাপনা):

যদি আপনি অ্যাপ্লিকেশনে একাধিক কম্পোনেন্টে একই স্টেট শেয়ার করতে চান, তবে একটি গ্লোবাল স্টেট ব্যবস্থাপনা সিস্টেম ব্যবহার করতে পারেন। Riot.js এ গ্লোবাল স্টেট ব্যবস্থাপনার জন্য Event Bus বা Redux-এর মতো লাইব্রেরি ব্যবহার করা যেতে পারে, কিন্তু Riot.js নিজেই গ্লোবাল স্টেট ম্যানেজমেন্ট সরবরাহ করে না।

গ্লোবাল স্টেট ব্যবস্থাপনার উদাহরণ:

<!-- App.riot -->
<app>
  <h1>{state.message}</h1>
  <button onclick={changeMessage}>Change Message</button>

  <script>
    export default {
      onMounted() {
        // Global state initialization
        this.state = { message: 'Hello, World!' };
      },

      changeMessage() {
        this.state.message = 'Message changed!';
      }
    }
  </script>
</app>

ব্যাখ্যা:

• state হল অ্যাপ্লিকেশনের একটি গ্লোবাল স্টেট, যা এখানে একটি স্ট্যাটিক মেসেজ ধারণ করছে।
• changeMessage() ফাংশনটি state.message আপডেট করবে, এবং UI তে পরিবর্তন দেখাবে।

Riot.js-এ State পরিবর্তন এবং Data Sharing-এর অন্যান্য বৈশিষ্ট্য:

1. opts (Props) এর মাধ্যমে ডেটা শেয়ার করা: যখন আপনি কোনো প্যারেন্ট কম্পোনেন্ট থেকে ডেটা পাস করতে চান, তখন opts ব্যবহার করুন।
2. Custom Events: দুই বা ততোধিক কম্পোনেন্টের মধ্যে ডেটা আদান-প্রদান করতে আপনি কাস্টম ইভেন্ট ব্যবহার করতে পারেন।
3. Two-way Data Binding: যদি আপনার ডেটা পাস করার পাশাপাশি ইনপুট ফিল্ড বা UI উপাদানগুলিতে পরিবর্তন চান, তবে আপনি two-way binding ব্যবহার করতে পারেন, যাতে কম্পোনেন্টের ডেটা এবং UI-তে পরিবর্তন একই সঙ্গে ঘটে।

সারসংক্ষেপ:

State পরিবর্তন এবং Data Sharing Riot.js এর মধ্যে দুটি মৌলিক ধারণা। State পরিবর্তন করার মাধ্যমে আপনি ডেটাকে কম্পোনেন্টের ভিতরে ম্যানেজ করতে পারেন, এবং কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করার জন্য আপনি props এবং custom events ব্যবহার করতে পারেন। এটি অ্যাপ্লিকেশনকে আরও কার্যকরী এবং ইন্টারঅ্যাকটিভ করে তোলে।